import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Image, SafeAreaView } from 'react-native';

const categories = [
  { name: '全部' },
  { name: '手机游戏' },
  { name: '网络游戏' },
  { name: '魅道一卡通' },
  { name: '其他' },
];

export default function SellScreen() {
  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <Text style={styles.headerText}>我要卖</Text>
      </View>

      {/* 筛选按钮区 */}
      <View style={styles.filterRow}>
        <TouchableOpacity style={styles.filterBtnActive}>
          <Text style={styles.filterBtnActiveText}>出售商品分类</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.filterBtnDisabled} disabled>
          <Text style={styles.filterBtnDisabledText}>出售游戏类型</Text>
        </TouchableOpacity>
      </View>

      {/* 分类列表 */}
      <ScrollView style={styles.list}>
        {categories.map((item, idx) => (
          <TouchableOpacity key={idx} style={styles.listItem}>
            <Text style={styles.listItemText}>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  header: {
    height: 56,
    backgroundColor: '#d0021b',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
  },
  filterRow: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingTop: 24,
    paddingBottom: 16,
    backgroundColor: '#fff',
  },
  filterBtnActive: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#d0021b',
    borderRadius: 8,
    paddingHorizontal: 18,
    height: 40,
    marginRight: 10,
  },
  filterBtnActiveText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  filterBtnDisabled: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    paddingHorizontal: 18,
    height: 40,
  },
  filterBtnDisabledText: {
    color: '#bbb',
    fontSize: 16,
    fontWeight: 'bold',
  },
  filterIcon: {
    width: 16,
    height: 16,
    marginLeft: 6,
    tintColor: '#fff',
  },
  list: {
    flex: 1,
    backgroundColor: '#fff',
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 48,
    paddingLeft: 18,
    paddingRight: 19,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
    backgroundColor: '#fff',
  },
  listItemText: {
    flex: 1,
    fontSize: 18,
    color: '#222',
  },
  listArrow: {
    width: 18,
    height: 18,
    tintColor: '#bcbcbc',
  },
}); 